import React, { useEffect, useState } from "react"
import { Col, message, Row } from "antd"
import { Res, WithRouteProps } from "../../types/base"
import Layout from '../../components/layout'
import $http from "../../utils/require"
import { useParams } from "react-router"
import ProductItem, { ProductItemFace } from "../../components/productItem"
import styles from './index.module.scss'

const Product = (props: WithRouteProps) => {

    const { productId } = useParams<{ productId: string }>()
    const [product, setProduct] = useState<ProductItemFace>()

    useEffect(() => {
        $http['getProductsById']({
            productId
        }).then(res => {
            setProduct(res[0])
        }).catch((err: Res) => {
            message.error(err.error)
        })
    }, [])


    return (
        <Layout title="首页" subtitle="尽情享受吧">
            <Row gutter={36}>
                <Col span="18" className={styles.p_item}>
                    {
                        product && <ProductItem product={product} showViewProduct={false}></ProductItem>
                    }

                </Col>
                <Col span="6">2</Col>
            </Row>
        </Layout>
    )
}

export default Product
